<template>
  <div class="about">
    <h1>以下都是父组件的内容</h1>
    <!-- 3.用子 -->
    <!-- <HelloKitty total="total" currentPage="currentPage"></HelloKitty> -->
    <!-- 假的输入框：在这输入 改变下面真的子组件 -->
    父组件的输入框：
    <!-- 父输入框 双向绑定了fmodel -->
    <input type="text" v-model="fmodel"/>
    fmodel：{{fmodel}}
    <hr>
    <h2>以下内容是子组件在父组件的展示</h2>
    <!-- 子组件，单向绑定fmodel 一旦fmodel的值发生变化，传入子组件的值也会变化 -->
    <myinput type="text"  :vModel="fmodel" @sonMethod="fatherMethod"/>
  </div>
</template>
<script>
//1.声子
// import HelloKitty from '../components/HelloKitty.vue'
//第二种写法的 @  表示 src的根目录
import HelloKitty from '@/components/HelloKitty.vue'
import myinput from '@/components/myInput.vue'
export default {
  //2.挂子
  //组件挂载 必备属性
  components:{
    //前面这个名字叫做变量名，可以变，后面这个是import的名称
    // Hello:HelloKitty
    //如果变量名称和import的名称相同，可以只写一个
    HelloKitty,
    myinput
  },
  data() {
    return {
      total:30,
      currentPage:2,
      fmodel:"初始值"
    }
  },
  methods:{
    fatherMethod(e){
        console.log("父组件接收子组件发过来的值：",e);
        this.fmodel = e
    }
  }
}
</script>